import isHotkey from "is-hotkey"
import Editor from "../editor"
import { BaseEvent } from "./baseEvent"
import { Selection } from "../models"

export class KeyboardEvent extends BaseEvent {
  private isComposing: boolean = false

  constructor(private editor: Editor, private container: HTMLElement) {
    super()
    this.editor = editor
    this.container = container
  }

  private beforeInputHandler = (e: InputEvent) => {
    const inputType = e.inputType
    e.preventDefault() // 阻止默认的输入显示
    console.log(inputType)
    // if (inputType === 'insertCompositionText' || inputType === 'deleteCompositionText') {
    //   return
    // }
    if (inputType === "insertText") {
      const text = e.data
      if (text) {
        this.editor.insertTextAtCursor(text)
      }
    } else if (inputType === "deleteContentBackward") {
      this.editor.deleteTextAtCursor()
    } else if (inputType === "insertParagraph") {
      this.editor.insertTextAtCursor("\n")
    } else if (inputType === "insertFromPaste") {
      const data = e.dataTransfer
      const text = data?.getData("text/plain")
      if (text) {
        this.editor.insertTextAtCursor(text)
      }
    } else if (inputType === "deleteByCut") {
      this.editor.deleteTextAtCursor()
    } else if (inputType === "historyUndo") {
      this.undoHandler()
    } else if (inputType === "historyRedo") {
      this.redoHandler()
    }
  }

  private compositionendHandler = (event: CompositionEvent) => {
    this.isComposing = false
    const text = event.data
    if (text) {
      this.editor.insertTextAtCursor(text)
    }
  }

  private compositionstartHandler = () => {
    this.isComposing = true
  }

  private undoHandler = () => {
    this.editor.undos?.()
  }

  private redoHandler = () => {
    this.editor.redo?.()
  }

  private keydownHandler = (event: globalThis.KeyboardEvent) => {
    if (isHotkey("mod+z", { byKey: true })(event)) {
      this.undoHandler()
    }
    if (isHotkey("mod+z+shift", { byKey: true })(event)) {
      console.log("redo")
      this.redoHandler()
    }
  }

  private selectionchangeHandler = (selection: Selection) => {
    console.log("selectionchangeHandler")
    if (selection && !this.isComposing) {
      this.editor.setSelection(selection.anchor, selection.focus)
    }
  }

  addListeners() {
    this.container.addEventListener("beforeinput", this.beforeInputHandler)
    this.container.addEventListener(
      "compositionend",
      this.compositionendHandler,
    )
    this.container.addEventListener(
      "compositionstart",
      this.compositionstartHandler,
    )
    this.container.addEventListener("keydown", this.keydownHandler)
    this.editor.on("selection-change", this.selectionchangeHandler)
  }

  removeListeners = () => {
    this.container.removeEventListener("beforeinput", this.beforeInputHandler)
    this.container.removeEventListener(
      "compositionend",
      this.compositionendHandler,
    )
    this.container.removeEventListener(
      "compositionstart",
      this.compositionstartHandler,
    )
    this.container.removeEventListener("keydown", this.keydownHandler)
    this.editor.removeListener("selection-change", this.selectionchangeHandler)
  }
}
export default KeyboardEvent
